<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>资料修改</title>
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			body{background: #f3f3f3;}
			.info{width: 100%;height: 4rem;background: #fff;position: absolute;top: 0.3rem;left: 0;overflow: hidden;}
			.info ul{width: 100%;height: 3.75rem;padding: 0 !important;margin: 0 !important;margin-top: 0.2rem !important;}
			.info ul li{font-size: 0.28rem;color: #414141;line-height: 1rem;padding-left: 0.67rem;width: 100%;height: 0.94rem;background: #fff;/*border-bottom: 0.01rem solid #e2e2e2;*/position: relative;}
			.info ul li:not(:last-child):after{position: absolute;right: 0;bottom: 0;left: 15px;height: 1px;content: '';-webkit-transform: scaleY(.2);transform: scaleY(.2);background-color: #c8c7cc;}
			.info ul li:last-child{border-bottom: none;}
			.info .icon{width: 0.58rem;height: 100%;background: #fff;position: absolute;top: 0;}
			.info .icon div{width: 0.32rem;height: 0.32rem;background-size: contain;position: absolute;left: 0.21rem;}
			.icon1{background: url("../../../images/menu/portrait1.png") no-repeat center center; top: 0.54rem;}
			.icon2{background: url("../../../images/menu/tel.png") no-repeat center center; top: 1.48rem;}
			.icon3{background: url("../../../images/menu/email.png") no-repeat center center; top: 2.41rem;}
			.icon4{background: url("../../../images/menu/petName.png") no-repeat center center; top: 3.35rem;}
			.info ul li b{position: absolute;right: 0.35rem;color: #c7c7cc;}
			.info ul li .portrait{position: absolute;top: 0.07rem;right:0.68rem ;width: 0.78rem;height: 0.78rem;/*background: url(../../../images/menu/portrait.png) no-repeat center center;*/background-size: cover;}
			.info ul li .portrait img{width: 0.78rem;height: 0.78rem;}
			.info ul li .btn{width: 1.1rem;height: 0.4rem;border: 0.01rem solid #1653fc;color: #1653fc;border-radius: 0.1rem;font-size: 0.24rem;position: absolute;top: 0.28rem;right:0.71rem;line-height: 0.4rem;text-align: center;}
			.info ul li span{position: absolute;right: 0.71rem;color: #999999;font-size: 0.26rem;}
		
			.encrypted_box{font-size: 0.28rem;color: #414141;line-height: 1rem;padding-left: 0.67rem;width: 100%;height: 0.96rem;background: #fff;position: absolute;top: 4.45rem;left: 0;}
			.encrypted_box .icon_encrypted{width: 0.32rem;height: 0.32rem;background: url(../../../images/menu/encrypted.png) no-repeat center center;background-size: contain;position: absolute;top: 0.35rem;left: 0.24rem;}
			.encrypted_box b{position: absolute;right: 0.35rem;color: #c7c7cc;}
			.encrypted_box span{position: absolute;right: 0.71rem;color: #999999;font-size: 0.26rem;}

			.select-box{width: 100%;height: 2.86rem;background: #fff;position: absolute;bottom: 0;}
			.select-box ul{margin: 0 !important;padding: 0 !important;}
			.select-box ul li{/*border-bottom: 0.01rem solid #e7e7e7;*/height: 0.86rem;text-align: center;color: #265efc;line-height: 0.86rem;}
			.select-box ul li:after{position: absolute;right: 0;bottom: 0;left: 15px;height: 1px;content: '';-webkit-transform: scaleY(.5);transform: scaleY(.5);background-color: #c8c7cc;}
			.select-box ul li:last-child{border-bottom: none; color: #333333;}
			.select-box ul li:first-child,.select-box ul li:last-child{height: 0.95rem;line-height: 0.95rem !important;}
			.mask{display: none;}
		</style>
	</head>
	<body>
		<!--<div class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="back">返回</a>
			<h1 class="mui-title">我的资料</h1>
		</div>-->
		<div class="info">
			<ul>
				<li >
					头像
					<b>></b>
					<div class="portrait"><img id="pic" src=""/></div>
				</li>
				<li id="bindPhone">
					手机
					<b>></b>
					<span id="phone"></span>
				</li>
				<li id="bindEmail">
					邮箱
					<b>></b>
					<span id="email"></span>
				</li>
				<li id="nicheng">
					昵称
					<b>></b>
					<span id="nickName"></span>
				</li>
			</ul>
			<div class="icon">
				<div class="icon1"></div>
				<div class="icon2"></div>
				<div class="icon3"></div>
				<div class="icon4"></div>
			</div>
		</div>
		<div class="encrypted_box">
			<div class="icon_encrypted"></div>
			密保问题
			<b>></b>
			<span id="secret">未设置</span>
		</div>
		<!--<div class="mui-backdrop mask">
			<div class="select-box">
				<ul>
					<li>从手机相册选择</li>
					<li>拍照</li>
					<li class="close">取消</li>
				</ul>
			</div>
		</div>-->
	</body>
	<script>
		function my_immersed(){
			
		}
	</script>
	<script src="../../../js/immersed.js"></script>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/app.js"></script>
	<script>
		var portrait = document.querySelector('.portrait');
		mui.plusReady(function(){
			//获取用户信息
			utils.ajax('appUserInfo/userInfo.do',function(data){
				var data = JSON.parse(data);
				if (data.state == '1') {
					var userInfo = data.userInfo;
					initInfo(userInfo);
				}
			},'userId='+getUserId(),null,function(){
				mui.toast('抱歉，当前服务不可用，请稍后再试');
			});

		});
		//初始化数据
		function initInfo(userInfo) {
			var headImg = userInfo.headImg;
			var phone = userInfo.phone?userInfo.phone:null;
			var email = userInfo.email?userInfo.email:'';
			var nickName = userInfo.nickName?userInfo.nickName:'';
			localStorage.setItem('nickName',nickName);
			var isSecret = userInfo.isSecret=='1'?'已设置':'未设置';
			var src;
			if (headImg) {
				src = utils.HOST + "ImgServlet?imgPath="+ headImg + "&random="+Math.random();
			} else {
				src = '../../../images/menu/portrait.png';
			}
			document.getElementById("pic").setAttribute('src',src);
			document.getElementById('nickName').innerHTML = nickName;
			document.getElementById('secret').innerHTML = isSecret;
			if (phone) {
				document.getElementById('phone').innerHTML = phone;
			}
			if (email) {
				document.getElementById('email').innerHTML = email;
			}
		}
		
		portrait.addEventListener('tap',function(){
			var selfele = this;
            if (mui.os.plus) {  
                var a = [{ title: "拍照" }, {title: "从手机相册选择" }]; 
                plus.nativeUI.actionSheet({ title: "修改用户头像", cancel: "取消", buttons: a }, 
	                function(b) { /*actionSheet 按钮点击事件*/
	                    switch (b.index) { 
	                        case 0: 
	                            break; 
	                        case 1: 
	                            getImage(function(data,dir){
	                            	cutImage(dir);
	                            }); /*拍照*/
	                            break; 
	                        case 2: 
	                            galleryImg(function(data,dir){
	                            	cutImage(dir);
	                            });/*打开相册*/
	                            break; 
	                        default: 
	                            break; 
	                    } 
	                }) 
            }
		});
		//绑定手机
		document.getElementById('bindPhone').addEventListener('tap',function(){
			var url = '_www/src/my/profile/tel.html';
			showTemplates(url,'绑定手机',url);
		});
		//邮箱
		document.getElementById('bindEmail').addEventListener('tap',function(){
			var url = '_www/src/my/profile/email.html';
			showTemplates(url,'绑定邮箱',url);
		});
		//昵称
		document.getElementById('nicheng').addEventListener('tap',function(){
			var url = '_www/src/my/profile/pet_name.html';
			showTemplates(url,'昵称设置',url);
		});
		//密保问题
		document.querySelector('.encrypted_box').addEventListener('tap',function(){
			var url = '_www/src/my/profile/security_pass.html';
			showTemplates(url,'密保问题设置',url);
		});
		
		//监听refresh事件
		window.addEventListener('refresh',function(){
			var wb = plus.webview.getWebviewById('tab-webview-subpage-usercenter-content.html');
			mui.fire(wb,'refreshHead');
			plus.webview.currentWebview().reload(true);
		})
		
		//裁剪图片
        function cutImage(path) {
            mui.openWindow({
                url: 'cutImage.html',
                id: 'cutImage',
                extras: {
                    path: path,
                },
                show: {
                    aniShow: 'zoom-fade-in',
                    duration: 800
                },
                waiting: {
                    autoShow: true
                }
            });
        }
        //图片剪裁好的监听
		document.addEventListener('updateHeadImg',function(e){
			var base64Str = e.detail.img;
			var patt1=new RegExp("\\+","g");
			base64Str = base64Str.replace(patt1,"-%and%-");
			var param = "base64Date="+base64Str+"&userId="+getUserId();
			utils.ajax("appUserInfo/uploadUserHeadImg.do" , function(data){
				data = JSON.parse(data);
				if(data.state == 1){
					var headImg = data.headImg;
					if (headImg) {
						var wb = plus.webview.getWebviewById('tab-webview-subpage-usercenter-content.html');
						mui.fire(wb,'refreshHead',{"headImg":headImg});
						var src = utils.HOST + "/ImgServlet?imgPath="+ headImg + "&random="+Math.random();
						document.getElementById('pic').setAttribute('src', e.detail.img);
					}
				}else{
					mui.toast("上传失败,请重试")
				}
			},param,{showWait:true})
			
		})
		
		function updateImg(da,dir){
			//var user = getUser();
			var user = {"userId":getUserId()};
			var url = utils.HOST + "appUserInfo/uploadUserHeadImg.do";
			wt = plus.nativeUI.showWaiting('头像上传中...');
			var task = plus.uploader.createUpload(url, {
					method: "POST"
				},
				function(t, status) { //上传完成  
					 
					if(status == 200) {
						var temp = decodeURIComponent(t.responseText);
						var data = JSON.parse(temp);
						if(data.state == 1) {
							wt.close();
							var headImg = data.headImg;
							document.getElementById('pic').setAttribute('src', headImg ? utils.HOST+headImg : '../../../images/menu/portrait.png');
							if (headImg) {
								var wb = plus.webview.getWebviewById('tab-webview-subpage-usercenter-content.html');
								mui.fire(wb,'refreshHead',{"headImg":headImg});
								var src = utils.HOST + "/ImgServlet?imgPath="+ headImg + "&random="+Math.random();
								document.getElementById("pic").setAttribute('src',src);
							}
						} else {
							mui.toast('上传失败');
							wt.close();
						}
					} else {
						mui.toast("上传失败：" + status);
						wt.close();
					}
					wt.close();
				}
			);
			task.addFile(dir, {key: 'headImg'});
			task.addData("userId", user.userId);
			task.start();
			
		}
		
		function galleryImg(callback) { 
		    plus.gallery.pick(function(a) {
		    //	var HEADname = 'head'+Math.floor(100000000*Math.random())+'.png';
		    	var HEADname = 'head.png';
		        plus.io.resolveLocalFileSystemURL(a, function(entry) { 
		            plus.io.resolveLocalFileSystemURL("_downloads/", function(root) { 
		                root.getFile("head.png", {}, function(file) { 
		                    //文件已存在 
		                    file.remove(function() { 
		                        console.log("file remove success"); 
		                        entry.copyTo(root, HEADname, function(e) { 
		                                var e = e.fullPath + "?version=" + new Date().getTime(); 
		                                uploadHead(e,function(data,dir){
							            	callback(data,dir);
							            }); /*上传图片*/ 
		                                //变更大图预览的src 
		                                //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现 
		                            }, 
		                            function(e) { 
		                                console.log('copy image fail:' + e.message); 
		                            }); 
		                    }, function() { 
		                        console.log("delete image fail:" + e.message); 
		                    }); 
		                }, function() { 
		                    //文件不存在 
		                    entry.copyTo(root, HEADname, function(e) { 
		                            var path = e.fullPath + "?version=" + new Date().getTime(); 
		                            uploadHead(path,function(data,dir){
						            	callback(data,dir); 
						            }); /*上传图片*/
		                        }, 
		                        function(e) { 
		                            console.log('copy image fail:' + e.message); 
		                        }); 
		                }); 
		            }, function(e) { 
		                console.log("get _www folder fail"); 
		            }) 
		        }, function(e) { 
		            console.log("读取拍照文件错误：" + e.message); 
		        }); 
		    }, function(a) {}, { 
		        filter: "image" 
		    }) 
		};
		//拍照 
		function getImage(callback) { 
			//var HEADname = 'head'+Math.floor(100000000*Math.random())+'.png';
			var HEADname = 'head.png';
		    var c = plus.camera.getCamera(); 
		    c.captureImage(function(a) {
		    	 /*上传图片*/
		        plus.io.resolveLocalFileSystemURL(a, function(entry) {
		        	 plus.io.resolveLocalFileSystemURL("_downloads/", function(root){
		        	 	 root.getFile("head.png", {}, 
		        	 	 //存在旧文件
		        	 	 function(file){
		        	 	 	file.remove(function(){ 
		                        entry.copyTo(root, HEADname, function(e) {
		                        		var e = e.fullPath + "?version=" + new Date().getTime();
		                                uploadHead(e,function(data,dir){
							            	callback(data,dir);
							            }); 
		                           }, function(e) { 
		                                console.log('copy image fail:' + e.message); 
		                            }); 
		        	 	 	})
		        	 	 },function(){
		                    //文件不存在 
		                    entry.copyTo(root, HEADname, function(e) { 
		                            var path = e.fullPath + "?version=" + new Date().getTime();
		                            uploadHead(path,function(data,dir){
						            	callback(data,dir); 
						            }); /*上传图片*/
		                        }, 
		                        function(e) { 
		                            console.log('copy image fail:' + e.message); 
		                        }); 
		        	 	 })
		        	 },function(e){
		        	 	
		        	 })
		        }, function(es) { 
		            mui.toast('获取照片失败');
		        }); 
		    }, function(s) { 
		        console.log("error" + s); 
		    }, { 
		        filename: "_downloads/head"
		    }) 
		} 
		function uploadHead(imgPath,callback) {
		    var image = new Image(); 
		    image.src = imgPath; 
		    image.onload = function() { 
		   		var imgData = getBase64Image(image);
		   		callback(imgData,imgPath);
		    } 
		} 
		  //将图片压缩转成base64 
		function getBase64Image(img) { 
		    var canvas = document.createElement("canvas"); 
		    var width = img.width; 
		    var height = img.height; 
		    // calculate the width and height, constraining the proportions 
		    if (width > height) { 
		        if (width > 300) { 
		            height = Math.round(height *= 300 / width); 
		            width = 300; 
		        } 
		    } else { 
		        if (height > 300) { 
		            width = Math.round(width *= 300 / height); 
		            height = 300; 
		        } 
		    } 
		    canvas.width = width;   /*设置新的图片的宽度*/ 
		    canvas.height = height; /*设置新的图片的长度*/ 
		    var ctx = canvas.getContext("2d"); 
		    ctx.drawImage(img, 0, 0, width, height); /*绘图*/ 
		    var dataURL = canvas.toDataURL("image/png", 0.8); 
		    return dataURL.replace("data:image/png;base64,", ""); 
		}
	</script>
</html>